<template>
	<div>
		<div>
			<a-card>
				<div :class="advanced ? 'search' : null">
					<div :class="advanced ? null: 'fold'">
						<div class="flex data_wrap" style="display: flex;justify-content:space-around">
							<div class="flex-1" style="padding-left:80px">
								<div class="flex">
									<img class="money_icon" src="../../assets/images/balance.png" alt="可提现金额">
									<div class="flex-1" style="line-height:23px">
										<p>可提现金额（元）</p> 
										<p class="red-font money_data">{{account.balance}}</p>
									</div>
								</div>
								<p style="margin-top:25px">
									<el-button v-if="account.balance>0" type="warning" size="small"
										@click="$router.push('/account/withdraw')">提现</el-button>
								</p>
							</div>
							<div class="flex-1" style="border-left:1px solid #e6e6e6;padding-left:80px">
								<div class="flex">
									<img class="money_icon" src="../../assets/images/frozen.png" alt="冻结金额">
									<div class="flex-1" style="line-height:23px">
										<p>提现金额（元）</p>
										<p class="red-font money_data">{{account.balance_drawal}}</p>
									</div>
								</div>
								<p style="margin-top:35px" class="color-999">提现金额为正在提现的金额</p>
							</div>
							<div class="flex-1" style="border-left:1px solid #e6e6e6;padding-left:80px">
								<div class="flex">
									<img class="money_icon" src="../../assets/images/frozen.png" alt="冻结金额">
									<div class="flex-1" style="line-height:23px">
										<p>冻结金额（元）</p>
										<p class="red-font money_data">{{account.balance_end}}</p>
									</div>
								</div>
								<p style="margin-top:35px" class="color-999">冻结金额为已冻结的金额</p>
							</div>
						</div>
					</div>
				</div>
			</a-card>
			<a-card>
				<div class="child_page">
					<div class="flex align-center table-top-btns">
						<h3 class="flex align-center">提现记录 </h3>
					</div>
					<el-table border :data="tableData">
						<el-table-column align="center" prop="id" label="编号" width="100" />
						<el-table-column align="center" label="账户类型" width="100">
							<span>租金账户</span>
						</el-table-column>
						<el-table-column align="center" label="提现方式">
							<template slot-scope="scope">
								<span>{{ scope.row.pay_type == 1 ? '支付宝' : '' }}</span>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="alipay_trade_no" label="流水号" />
						<el-table-column align="center" prop="withdrawal_amount" label="提现金额" />
						<el-table-column align="center" prop="money" label="支付宝账号" />
						<el-table-column align="center" prop="payee_account" label="收款人姓名" />
						<el-table-column align="center" prop="apply_time" label="申请时间" />
						<el-table-column align="center" label="状态">
							<template slot-scope="scope">
								<el-tag
									:type="scope.row.status == 1 ? '' : scope.row.status == 2 || scope.row.status == 3 ? 'success' : 'danger'">
									{{ scope.row.status == 1 ? '待审核' : scope.row.status == 2 ? '已入账' : scope.row.status == 3 ? '未入账' : '提现拒绝' }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column align="center" label="原因">
							<template slot-scope="scope">
								<span class="red-font">{{ scope.row.refuse_reason }}</span>
							</template>
						</el-table-column>
						<!-- <el-table-column fixed="right" align="center" label="操作" width="140">
							<template slot-scope="scope">
								<el-button v-if="$hasMethod('#view')" type="primary" size="mini"
									@click="viewItem(scope.row.id)">查看
								</el-button>
								<el-button type="primary" size="mini"
									@click="viewItem(scope.row.id)">查看
								</el-button>
							</template>
						</el-table-column> -->
					</el-table>
				</div>
				<div class="flex align-center justify-end custom_page">
					<span class="total">共{{ pageTotal }}页</span>
					<span class="total">共{{ total }}条</span>
					<el-pagination class="text-right" prev-text="上一页" next-text="下一页" :page-size="pageSize"
						:page-sizes="pageList" :total="total" background :layout="layout" :current-page.sync="page"
						@current-change="handleCurrentChange" @size-change="handleSizeChange" />
				</div>
			</a-card>
		</div>
	</div>

</template>

<script>
	import {
		myAmount,
		withdrawalList,
	} from '@/api/account'
	export default {
		name: 'Success',
		components: {},
		data() {
			return {
				advanced: true,
				total: 0,
				tableData: [],
				page: 1,
				pageSize: 10,
				pageList: [5, 10, 20, 50, 100],
				account: {
					balance: 0,
					balance_drawal: 0,
					balance_end: 0
				}
			}
		},
		computed: {
			pageTotal() {
				const num = Math.ceil(this.total / this.pageSize)
				return num > 0 ? num : 1
			},
			layout() {
				if (this.total === 0) {
					return 'prev, pager, next'
				}
				if (this.pageTotal > 1) {
					return 'sizes, prev, pager, next, jumper'
				}
				return 'sizes, prev, pager, next'
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			getList(flag) {
				const {
					page,
					pageSize
				} = {
					page: this.page,
					pageSize: this.pageSize
				}
				if (!flag) {
					this.tableData = []
				}
				myAmount().then(res => {
					this.account = res
					console.log(res);
				})
				withdrawalList({
					page,
					pageSize
				}).then(res => {
					this.tableData = res.data
					this.total=res.total
				})
			},
			changePageSize(val) {
				this.pageSize = val
				if (this.pageList.indexOf(val) === -1) {
					this.pageList.unshift(val)
				}
			},
			handleSizeChange(val) {
				this.page = 1
				this.pageSize = val
				this.getList()
			},
			handleCurrentChange(val) {
				this.page = val
				this.getList()
			},
		}
	}
</script>

<style scoped lang="less">
	.result-success {
		.action:not(:first-child) {
			margin-left: 8px;
		}

		.project-name {
			font-size: 16px;
			color: @title-color;
			font-weight: 500;
			margin-bottom: 20px;
		}
	}
</style>
